<template>
    <div class="card-container">
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="content">
            <slot name="content"></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.card-container {
    border-radius: 8px;
    border: 1px solid rgb(187, 187, 187);
    background-color: #fff;
    box-sizing: border-box;

    >.header {
        padding: 16px;
        border-bottom: 1px solid rgb(187, 187, 187);
    }

    >.content {
        padding: 16px;

    }
}

.card-container+.card-container {
    margin-top: 8px;
}
</style>